<template>
  <div class="box" id="pic">
    <div class="header">
      <div class="back" @click="$router.go(-1)">
      <van-icon name="arrow-left" color="white" class="left"/>
    </div>
    </div>
    <div class="content" :piclist="piclist">
      <van-image
      v-for="(item, index) of piclist"
      :key="index"
      width="100%"
      height="auto"
      lazy-load
      :src="item.img"
      @click="toDetail(item.proid)"
     />
     <div class="foot">
       <van-image
        width='50%'
        @click="$router.push('/home')"
        lazy-load
        src="https://pic.flyco.net.cn/mall/cms/promotion/20200401/wap/wap_20_01.jpg"
       />
       <van-image
        width='50%'
        @click="$router.push('/search')"
        lazy-load
        src="https://pic.flyco.net.cn/mall/cms/promotion/20200401/wap/wap_20_02.jpg"
       />
     </div>
    <div class="fixright">
      <div class="right" @click="top">
         <img src="https://pic.flyco.net.cn/sources/service/fkf.jpg"/>
      </div>
      <div class="right" v-if="flag" @click="top">
         <img src="https://pic.flyco.net.cn/sources/service/ftop.jpg"/>
      </div>
    </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Image, Lazyload, Icon } from 'vant'
Vue.use(Image)
Vue.use(Lazyload)
Vue.use(Icon)
export default {
  data () {
    return {
      flag: false,
      piclist: [
        { proid: '', img: 'https://pic.flyco.net.cn/mall/cms/promotion/20200401/wap/wap_01.jpg?q=1' },
        { proid: '', img: 'https://pic.flyco.net.cn/mall/cms/promotion/20200401/wap/wap_02.jpg?q=1' },
        { proid: '', img: 'https://pic.flyco.net.cn/mall/cms/promotion/20200401/wap/wap_03.jpg?q=1' },
        { proid: 'pro_36baec01-7598-11ea-adf2-89cb10aff375', name: '智能剃须刀FS375', img: 'https://pic.flyco.net.cn/mall/cms/promotion/20200401/wap/wap_04.jpg?q=1' },
        { proid: 'pro_36baec14-7598-11ea-adf2-89cb10aff375', name: '电吹风FH6276', img: 'https://pic.flyco.net.cn/mall/cms/promotion/20200401/wap/wap_05.jpg?q=1' },
        { proid: 'pro_36bb3a24-7598-11ea-adf2-89cb10aff375', name: '理发器FC5910', img: 'https://pic.flyco.net.cn/mall/cms/promotion/20200401/wap/wap_06.jpg?q=1' },
        { proid: 'pro_36bb3a34-7598-11ea-adf2-89cb10aff375', name: '健康秤FH7008', img: 'https://pic.flyco.net.cn/mall/cms/promotion/20200401/wap/wap_08.jpg?q=1' },
        { proid: 'pro_36baec02-7598-11ea-adf2-89cb10aff375', name: '剃须刀FS339', img: 'https://pic.flyco.net.cn/mall/cms/promotion/20200401/wap/wap_09.jpg?q=1' },
        { proid: 'pro_36bb3a26-7598-11ea-adf2-89cb10aff375', name: '理发器FC5808', img: 'https://pic.flyco.net.cn/mall/cms/promotion/20200401/wap/wap_10.jpg?q=1' },
        { proid: 'pro_36bb3a31-7598-11ea-adf2-89cb10aff375', name: '健康秤FH7012', img: 'https://pic.flyco.net.cn/mall/cms/promotion/20200401/wap/wap_13.jpg?q=2' },
        { proid: 'pro_36bb3a25-7598-11ea-adf2-89cb10aff375', name: '理发器FC5902', img: 'https://pic.flyco.net.cn/mall/cms/promotion/20200401/wap/wap_15.jpg?q=1' },
        { proid: 'pro_36baec03-7598-11ea-adf2-89cb10aff375', name: '智能剃须刀FS372', img: 'https://pic.flyco.net.cn/mall/cms/promotion/20200401/wap/wap_16.jpg?q=1' },
        { proid: 'pro_36bac4f7-7598-11ea-adf2-89cb10aff375', name: '智能插座PS2090', img: 'https://pic.flyco.net.cn/mall/cms/promotion/20200401/wap/wap_18.jpg?q=1' },
        { proid: '', img: 'https://pic.flyco.net.cn/mall/cms/promotion/20200401/wap/wap_19.jpg?q=1' }
      ]
    }
  },
  mounted () {
    document.getElementById('pic').addEventListener('scroll', this.handleScroll, false)
  },
  methods: {
    handleScroll () {
      const scrollTop = document.getElementById('pic').scrollTop
      if (scrollTop > 400) {
        this.flag = true
      } else {
        this.flag = false
      }
      console.log(this.flag)
    },
    // 返回顶部
    top () {
      const back = setInterval(fa, 20)
      function fa () {
        var scrollTop = document.getElementById('pic').scrollTop
        const a = scrollTop - scrollTop / 5
        document.getElementById('pic').scrollTop = a
        if (a < 1) {
          document.getElementById('pic').scrollTop = 0
          clearInterval(back)
        }
      }
    },
    // 跳转详情
    toDetail (proid) {
      if (proid !== '') {
        this.$router.push({ path: '/product/' + proid })
      }
    }
  }
}

</script>

<style lang="scss" scoped>
#pic {
  height:auto;
}
.back {
  position: absolute;
  z-index: 999;
  top:.1rem;
  left:.2rem;
}
.left {
    background: #000;
    opacity: .3;
    line-height: .3rem;
    width: .3rem;
    height: .3rem;
    border-radius: 50%;
    text-align: center;
}
</style>
